<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        #dept_main, #dept_particulars{
            width: 48.5%;
            display: inline-block;
            vertical-align: top;
            padding: 20px;
            background: white;
            box-sizing: border-box;
        }
        #dept_tree{
            margin-top: 20px;
        }
        .layui-tree .layui-form-checkbox{
            display: none;
        }
    </style>
</head>

<body>
<input type="hidden" class="input-text" id="staffBh" name="staffBh">
<input type="hidden" class="input-text" id="busiBh" name="busiBh">
<input type="hidden" class="input-text" id="rdTime" name="rdTime">
<div class="layui-row">
    <div class="layui-col-xs6" style="width: 25%;">
        <div id="time_line" style="margin-top: 4%; margin-left: 4%;">
        </div>
    </div>
    <div class="layui-col-xs6" id="trail_table" style="width: 75%;">
        <table class="layui-hide" id="test" lay-filter="stu-table"></table>
        <script type="text/html" id="stu-toolbar">
            <a class="layui-btn layui-btn-xs" lay-event="query"><i class="layui-icon layui-icon-search"></i>轨迹查询</a>
            <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
        </script>
    </div>
</div>

<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/token.js"></script>
<script src="../../js/config.js"></script>
<script>
    //url 传参
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(window.location.search);
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }

    window.onload = function(){
        var $ = layui.jquery;
        $("input[name='staffBh']").val(GetQueryString("staffBh"));
        $("input[name='busiBh']").val(decodeURIComponent(GetQueryString("busiBh")));
        $("input[name='rdTime']").val(decodeURIComponent(GetQueryString("rdTime")));
        var staffBh = $("#staffBh").val();
        var rdTime = $("#rdTime").val();
        timelineshow("time_line",staffBh, rdTime);
    }


    function timelineshow(div, staffBh, rdTime){
        var $ = layui.jquery;
        $.ajax({
            url: HOST+"trail/trailDetail?staffBh=" + staffBh + "&rdTime=" + rdTime,
            type: "get",
            success: function (res) {
                console.log(res);
                if(res.code===200){
                    var list = res.data;

                    var uls = "<ul class=\"layui-timeline\">";
                    var uls1 = "<ul>";
                    var uls2 = "</ul>";
                    var lis = "<li class=\"layui-timeline-item\">";
                    var lis1 = "<li>";
                    var lis2 = "</li>";
                    var is = "<i class=\"layui-icon layui-timeline-axis\"></i>";
                    var divs = "<div class=\"layui-timeline-content layui-text\">";
                    var divs2 = "</div>";
                    var h3s = "<h3 class=\"layui-timeline-title\">";
                    var h3s2 = "</h3>";
                    var ps = "<p>";
                    var ps2 = "</p>";

                    if(list.length>0){
                        var content1 = "";
                        content1 = content1+uls;
                        for(var i=0; i<list.length; i++){
                            var content2 = "";
                            content2 = content2+lis+is+divs;
                            if(list[i].rdTime!=null&&list[i].rdTime!=''){
                                content2 = content2+h3s+createTime(list[i].rdTime)+h3s2
                            }
                            if (list[i].wyName!=null&&list[i].wyName!='') {
                                content2 = content2+ps+ "进入"+ list[i].wyName +"商户" + "<a style='cursor:pointer' onclick='getTrail2(\""+list[i].busiBh +"\", \""+list[i].rdTime +"\")'>" + list[i].busiName + "</a>";
                            }else {
                                content2 = content2+ps+ "进入商户" + "<a style='cursor:pointer' onclick='getTrail2(\""+list[i].busiBh +"\", \""+list[i].rdTime +"\")'>" + list[i].busiName + "</a>"
                            }

                            if (list[i].address!=null&&list[i].address!='') {
                                content2 = content2 + "<br>商户地址：" + list[i].address;
                            }

                            if (list[i].cdTime!=null&&list[i].cdTime!='') {
                                content2 = content2 + "<br>离店时间：" + list[i].cdTime + ps2;
                            }else {
                                content2 = content2 + ps2;
                            }


                            //可扩展
                            content2 = content2 + divs2+lis2;
                            content1 =content1+content2;
                        }
                        content1 = content1 +uls2;

                        //再跟你想追加的代码加到一起插入div中
                        document.getElementById(div).innerHTML = content1;
                    }
                }else if(res.code===500){
                    layer.msg(res.msg);
                }
            }

        });
    };

    function getTrail2(busiBh,rdTime) {
        getTrail(busiBh, rdTime);
    };

    function createTime(v){
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var ms = date.getMinutes();
        ms = ms<10?("0"+ms):ms;
        var s = date.getSeconds();
        s = s<10?("0"+s):s;
        var str = y+"-"+m+"-"+d+" "+h+":"+ms+":"+s;
        return str;
    }

    layui.use('table', function() {
        var $ = layui.$;
        var table = layui.table;
        table.render({
            elem: '#test'
            , id: 'stu-table-id'//重载需要
            , url: HOST+'trail/getTrailByBusiBh'
            , title: '商户表'
            ,cols: [[
                {type:'numbers', title: '序号'}
                ,{field:'staffName',align : 'center',width : 125,title: '员工姓名'}
                ,{field:'staffBh',align : 'center',width : 125,title: '员工编号'}
                ,{field:'busiName',align : 'center',width : 140, title: '商户名称'}
                ,{field:'busiBh',align : 'center',width : 125, title: '商户编号'}
                ,{field:'busiFzr',align : 'center',width : 125,title: '商户负责人'}
                ,{field:'address',align : 'center', width : 200,title: '商户地址'}
                ,{field:'rdTime',width : 160,align : 'center', title: '入店时间'}
                ,{field:'cdTime',width : 160,align : 'center', title: '离店时间'}
                ,{toolbar:"#stu-toolbar",align : 'center',width:120,fixed: 'right',title:"操作"}
            ]]
            , page: true
            , page: {
                curr: layui.data("trail_detail_page").index
            },
            done: (res, curr, count) => {
                layui.data("trail_detail_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        window.getTrail = function (busiBh,rdTime) {
            var table = layui.table;
            table.reload('stu-table-id',{
                where:{"busiBh":busiBh, "start_time":rdTime}
                ,page:{
                    curr:1
                }
            });
        };

        //表操作  监听操作
        table.on('tool(stu-table)',function (obj) {
            var data=obj.data;
            var event=obj.event;
            if(event==='query'){
                timelineshow("time_line",data.staffBh, data.rdTime);
            }
        });
    });
</script>
</body>
</html>